<template>
  <div>
    <el-card class="!border-none" shadow="never">
      <el-form
        ref="formRef"
        class="mb-[-16px]"
        :model="queryParams"
        :inline="true"
      >
        <el-form-item>
          <el-input
            class="w-[280px] small_input"
            v-model="queryParams.id"
            placeholder="作品id"
            clearable
            @keyup.enter="resetPage"
          />
        </el-form-item>

        <el-form-item>
          <el-input
            class="w-[280px] small_input"
            v-model="queryParams.prompt"
            placeholder="描述词"
            clearable
            @keyup.enter="resetPage"
          />
        </el-form-item>

        <el-form-item>
          <el-select
            class="w-[280px] small_input"
            v-model="queryParams.fine_type"
            placeholder="是否优秀作品"
          >
            <el-option
              v-for="(item, key) in excellentMap"
              :key="key"
              :label="item"
              :value="key"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-date-picker
            size="small"
            v-model="queryParams.value2"
            start-placeholder="选择开始时间"
            end-placeholder="选择结束时间"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
            type="daterange"
            class="w-[280px] small_input_picker"
            placeholder="以创建时间范围筛选"
            @change="dateChange"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="resetPage">查询</el-button>
          <el-button @click="resetParams">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="!border-none" shadow="never">
      <el-table
        stripe
        class="mt-2"
        size="large"
        v-loading="pager.loading"
        :data="pager.lists"
      >
        <el-table-column label="作品ID" prop="id" min-width="120" />
        <el-table-column label="描述词" min-width="300" prop="prompt_desc" />
        <el-table-column label="生成结果" prop="nickname" min-width="120">
          <template #default="{ row }">
            <el-image
              style="width: 100px; height: 100px"
              :src="row.image_url"
            />
          </template>
        </el-table-column>

        <el-table-column label="上传图片" prop="nickname" min-width="120">
          <template #default="{ row }">
            <el-image
              style="width: 100px; height: 100px"
              :src="row.image_base"
            />
          </template>
        </el-table-column>

        <el-table-column label="优秀作品" min-width="160">
          <template #default="{ row }">
            {{ row.is_fine ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="package_time" min-width="180">
          <template #default="{ row }">
            {{ row.create_time }}
          </template>
        </el-table-column>

        <el-table-column label="操作" min-width="110" fixed="right">
          <template #default="{ row }">
            <div class="flex items-center">
              <el-button plain type="primary" @click="gotoDeatil">
                详情
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex justify-end mt-4">
        <pagination
          v-model="pager"
          @change="getLists"
          background="red"
          layout="prev, pager, next, sizes"
        />
      </div>
    </el-card>
  </div>
</template>
<script lang="ts" setup name="imageToImage">
import { usePaging } from "@/hooks/usePaging";
import { getPaintRecord } from "@/api/consumer";
import { excellentMap } from "@/enums/appEnums";

const router = useRouter();

const popShow = ref(false);

// 获取当前的url ?后面的参数
const route = useRoute();

const queryParams = reactive({
  value2: "",
  // 作品id
  id: "",
  //   描述词
  prompt: "",
  //   是否是优秀作品，0全部1优秀，2普通
  fine_type: "",
  student_id: route?.query?.id,
  start_time: "",
  end_time: "",
  type: 2,
});

const dateChange = (_data) => {
  queryParams.start_time = _data?.[0];
  queryParams.end_time = _data?.[1];
};

const { pager, getLists, resetPage, resetParams } = usePaging({
  fetchFun: getPaintRecord,
  params: queryParams,
});

//弹框关闭
const popClose = () => {
  getLists();
  popShow.value = false;
};

onActivated(() => {
  getLists();
});

getLists();

// 路由跳转
const gotoDeatil = () => {
  router.push("/user/teacher/detail");
};
</script>

<style lang="scss" scoped></style>
